<template>
  <div class="hyydxq">
    <div class="toAskThe">
      <div>
        <img width="20px" height="20px" src="../../assets/img/ask.png" />
        <span>{{ objContent.createTime }}</span>
      </div>
      <div>
        <div>
          <div>
            <img v-if="!!objContent.userInfo && !!objContent.userInfo.headPortrait" :src="objContent.userInfo.headPortrait | imgPaths" />
            <img v-else src="../../assets/img/mrtx.png"  />
            <span>{{ mobilePhone | hidePhone }}</span>
          </div>
          <p>{{ (!!objContent.typeName && objContent.typeName) || '' }}</p>
        </div>
        <div>
          <p>{{ objContent.content }}</p>
          <div v-if="images.length > 0">
            <img
              v-for="(item, key) in images"
              :key="key"
              width="72px"
              @click="openImg(key)"
              height="72px"
              :src="item"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="replyMessage">
      <p>回复问题</p>
      <van-field
        v-model="content"
        name="content"
        rows="4"
        autosize
        type="textarea"
        maxlength="100"
        input-align="left"
        placeholder="请输入回复内容（100字以内）"
      />
      <div class="spacing" />
      <div style="background: #fff; padding: 10px 20px">
        <p class="col-333 font-15">图片</p>
        <upload-img v-model="fileInfoList" :maxCount="5" :isDetails="false"></upload-img>
        <div class="tip">注：支持格式JPG、JPEG、PNG，最多上传5张照片，单个不超 过5M。</div>
      </div>
    </div>
    <div class="add-btn">
      <van-button
        block
        type="info"
        color="#37B5B5"
        style="width: 85%; margin: 45px auto"
        @click="subMit"
        size="large"
        :loading="loading"
        loading-text="提交中..."
        >保存</van-button
      >
    </div>
    <van-image-preview v-model="show" :startPosition="index" swipeDuration="500" :images="images" @change="onChange">
      <template v-slot:index>第{{ index + 1 }}页</template>
    </van-image-preview>
  </div>
</template>

<script>
//保养记录
import { getValue, setValue } from '@/utils/auth'
import {
  Toast,
  Cell,
  CellGroup,
  Popup,
  Picker,
  DatetimePicker,
  PullRefresh,
  List,
  Search,
  RadioGroup,
  Radio,
  ImagePreview,
  Field,
  Button
} from 'vant'
import { getHandle, postHandle } from '@/api'
import UploadImg from '@/components/uploadImg'
import { imgPaths } from '../../filters'
import dayjs from 'dayjs'
export default {
  components: {
    UploadImg,
    [Field.name]: Field,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [DatetimePicker.name]: DatetimePicker,
    [PullRefresh.name]: PullRefresh,
    [Toast.name]: Toast,
    [List.name]: List,
    [Search.name]: Search,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [ImagePreview.Component.name]: ImagePreview.Component,
    [Button.name]: Button
  },
  data() {
    return {
      id: getValue('hfxxid') || '',
      show: false,
      index: 0,
      images: [],
      objContent: {},
      fileInfoList: [],
      content: '',
      mobilePhone: '',
      loading: false,
      replyId: '',
      loginUserId: getValue('loginUserId')
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.Initialize()
  },
  methods: {
    Initialize() {
      getHandle(`/agri/api/common/questionInfo/queryDetail/${this.id}?expertUserId=${this.loginUserId}`).then(res => {
        if (res.status == 0) {
          this.objContent = res.data
          this.mobilePhone = (!!res.data.userInfo && res.data.userInfo.mobilePhone + '') || ''
          this.replyId = res.data.questionReplyInfoModels.length > 0 ? res.data.questionReplyInfoModels[0].id : '111'
          // this.images =
          let images = !!res.data.uploadImgs ? res.data.uploadImgs.split(',') : []
          //   let images = [
          //     '/fms/api/show/54e213f2-23a2-4bef-9658-da64e06b81e1_0/teacher.png',
          //     '/fms/api/show/54e213f2-23a2-4bef-9658-da64e06b81e1_0/teacher.png',
          //     '/fms/api/show/54e213f2-23a2-4bef-9658-da64e06b81e1_0/teacher.png',
          //     '/fms/api/show/54e213f2-23a2-4bef-9658-da64e06b81e1_0/teacher.png',
          //     '/fms/api/show/54e213f2-23a2-4bef-9658-da64e06b81e1_0/teacher.png'
          //   ]
          this.images = images.map(item => {
            return imgPaths(item)
          })
          // imgPaths
        }
      })
    },
    onChange(index) {
      this.index = index
    },
    openImg(key) {
      this.index = key
      this.show = true
    },
    subMit() {
      if (!!this.content) {
        this.loading = true
        let params = {
          replyContent: this.content,
          uploadImgs: this.fileInfoList.map(item => item.baseUrl).join(',')
        }
        postHandle(`/agri/api/common/questionInfo/reply/${this.replyId}`, params).then(res => {
          if (res.status == 0) {
            this.$toast.success('回复成功')
            this.$bridge.call('base.closePage')
          } else {
            this.$toast(res.msg)
          }
          this.loading = false
        })
      } else {
        this.$toast('问题内容不能为空')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tip {
  color: #999999;
  font-size: 13px;
}
.van-cell::after {
  border-bottom: 1px solid #fff;
}
::v-deep .van-field__body {
  border: 1px solid #eeeeee;
  padding: 8px;
  border-radius: 4px;
}
.van-cell {
  padding: 5px 16px;
  margin-bottom: -5px;
}
.replyMessage {
  margin-top: 10px;
  background-color: #fff;
  > p {
    padding: 10px 16px 5px;
    color: #333333;
    font-size: 15px;
  }
}
.toAskThe {
  background-color: #fff;
  > div {
    &:first-child {
      display: flex;
      align-items: center;
      height: 50px;
      border-bottom: 1px solid #eeeeee;
      padding: 0 15px;
      > span {
        font-size: 14px;
        color: #999999;
        margin-left: 10px;
      }
    }
    &:last-child {
      padding: 0 15px 10px;
      > div {
        &:first-child {
          height: 60px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          > div {
            display: flex;
            align-items: center;
            img {
              width: 28px;
              height: 28px;
              border-radius: 14px;
              margin-right: 5px;
            }
            > span {
              font-size: 15px;
              color: #333333;
            }
          }
          > p {
            font-size: 13px;
            color: #666666;
          }
        }
        &:last-child {
          background-color: #f7f7f7;
          border-radius: 4px;
          padding: 10px;
          > p {
            font-size: 13px;
            font-weight: 400;
            color: #666666;
            line-height: 20px;
          }
          > div {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            > img {
              margin-top: 10px;
            }
            // justify-content: flex-start
          }
          > div::after {
            content: '';
            width: 72px;
          }
        }
      }
    }
  }
}
.add-btn {
  padding-bottom: 10px;
}
</style>
